<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
    <script src="./js/vue2.js"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="./css/animate.css" />
    <style>
      #app {
        width: 600px;
        margin: 10px auto;
      }

      .tb {
        border-collapse: collapse;
        width: 100%;
      }

      .tb th {
        background-color: #0094ff;
        color: white;
      }

      .tb td,
      .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
      }

      .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="add">
        <!-- 调用指令,谁要谁调用 -->
        编号:<input type="text" v-model="count.id" v-myfocus /> 品牌名称:
        <input type="text" v-model="count.name" @keydown.enter="add" />
        <input type="button" value="添加" @click="add" />
      </div>
      <div class="add">
        品牌名称:
        <input v-model="serchvalue" type="text" placeholder="请输入搜索条件" />
      </div>
      <div>
        <table class="tb">
          <tbody>
            <tr>
              <th>编号</th>
              <th>品牌名称</th>
              <th>创立时间</th>
              <th>操作</th>
            </tr>

            <tr v-for="(item,index) in listData" :key="index">
              <td>{{ item.id }}</td>
              <td>{{ item.name }}</td>
              <td>{{ item.time | timer }}</td>
              <td>
                <a @click="delet(list.id)" href="javascript:viod(0)">删除</a>
              </td>
            </tr>
            <tr>
              <td colspan="4" v-if="listData.length==0">列表为空</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

    <script>
      // 自定义指令
      Vue.directive("myfocus", {
        inserted(el, binding) {
          console.log(binding);
          el.focus();
          //  全局filter过滤器: Vue.filter('过滤器名称',过滤器函数 function(左边的参数|处理后的参数{}))
        }
      });
      Vue.filter("timer", function(time, rec) {
        var date = new Date(time);
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      });
      var vm = new Vue({
        el: "#app",
        data: {
          list: [
            { id: 2, name: "城市猎人", time: new Date() },
            { id: 3, name: "秦时明月", time: new Date() },
            { id: 4, name: "刀剑神域", time: new Date() },
            { id: 5, name: "死神来了", time: new Date() },
            { id: 6, name: "城市猎人", time: new Date() }
          ],
          count: {
            id: "",
            name: "",
            time: new Date()
          },
          serchvalue: ""
        },
        methods: {
          add() {
            this.list.push({ ...this.count });
            this.list({ id: "", name: "", time: "" });
          },
          delet(id) {
            var index = this.list.findIndex(item => {
              return (id = item.id);
            });
            this.list.splice(index, 1);
          }
        },
        computed: {
          listData() {
            return this.list.filter(
              item => item.name.indexOf(this.serchvalue) != -1
            );
          }
        }
      });
    </script>
  </body>
</html>
